<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <el-container>
      <el-aside width="200px">
        <h1>{{user}}</h1>
        <!-- 导航菜单区域 -->
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
            <el-menu-item
              v-for="(item, index) in nav"
              :key="index"
              :index="item.i"
              @click="handleNavChange(index, item.src)"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h1>学院考试成绩管理系统</h1>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data() {
    return {
      // 导航菜单数据
      nav: [
        { i: "0", icon: "el-icon-menu", title: "个人信息", src: "/list" },
        {
          i: "1",
          icon: "el-icon-document",
          title: "成绩管理",
          src: "/achievement",
        },
        { i: "2", icon: "el-icon-setting", title: "学员管理", src: "/student" },
      ],
      // 用户名
      user: localStorage.getItem("usr")
    };
  },
  methods: {
    // 点击导航菜单
    handleNavChange(i, e) {
      console.log(i, e);
      // if(e)
      this.$router.push(e)
    },
  },
};
</script>
<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
  .el-header {
    background-color: #fff;
    color: rgb(112, 111, 111);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .el-aside {
    background-color: #304156;
    color: #fff;
    h1 {
      display: flex;
      justify-content: center;
      margin-top: 100px;
    }
    .el-menu {
      // height: 100px;
      margin-top: 20px;
      border-right: #304156;
    }
  }
}
</style>